<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:p="http://primefaces.org/ui"
                template="template.xhtml">
    <ui:param name="root" value="#{request.contextPath}/" />
    <ui:define name="main-head">
        <title>Calendario</title>
        <script type="text/javascript" src="#{root}js/locales.js" />
    </ui:define>        
    <ui:define name="main-content">
        <br/>
        <h3><h:outputText value="#{msgs.calendario}"/></h3> 
        <br/>
        <h:form id="form">

            <p:growl id="messages" showDetail="true" />

            <p:schedule id="schedule" value="#{scheduleController.eventModel}" widgetVar="myschedule" locale="es">

                <p:ajax event="dateSelect" listener="#{scheduleController.onDateSelect}" update="eventDetails" oncomplete="eventDialog.show()" />
                <p:ajax event="eventSelect" listener="#{scheduleController.onEventSelect}" update="eventDetails" oncomplete="eventDialog.show()" />
                <p:ajax event="eventMove" listener="#{scheduleController.onEventMove}" update="messages" />
                <p:ajax event="eventResize" listener="#{scheduleController.onEventResize}" update="messages" />

            </p:schedule>

            <p:dialog widgetVar="eventDialog" header="#{msgs.nuevaReunion}" showEffect="clip" hideEffect="clip">
                <h:panelGrid id="eventDetails" columns="2">
                    <h:outputLabel for="title" value="#{msgs.titulo}:" />
                    <p:inputText id="title" value="#{scheduleController.event.title}" required="true"/>

                    <h:outputLabel for="from" value="#{msgs.desde}:" />
                    <p:inputMask id="from" value="#{scheduleController.event.startDate}" mask="99/99/9999">
                        <f:convertDateTime pattern="dd/MM/yyyy" />
                    </p:inputMask>

                    <h:outputLabel for="to" value="#{msgs.hasta}:" />
                    <p:inputMask id="to" value="#{scheduleController.event.endDate}" mask="99/99/9999">
                        <f:convertDateTime pattern="dd/MM/yyyy" />
                    </p:inputMask>

                    <h:outputLabel for="allDay" value="#{msgs.todosDias}:" />
                    <h:selectBooleanCheckbox id="allDay" value="#{scheduleController.event.allDay}" />

                    <p:commandButton type="reset" value="#{msgs.limpiar}" />
                    <p:commandButton id="addButton" value="#{msgs.guardar}" actionListener="#{scheduleController.addEvent}" oncomplete="myschedule.update();eventDialog.hide();"/>
                </h:panelGrid>
            </p:dialog>

        </h:form>          
    </ui:define>          
</ui:composition>